
<!DOCTYPE html>
<html>
<head>
    <title>H5登录</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<!--<link rel="stylesheet" href="./css/login.css" type="text/css"/>-->
<style>

    *{
        font-family: "微软雅黑";
    }
    body,html{
        margin:0;
        padding:0;
        background: #fcfcfc;
    }
    .login{
        display: flex;/*flex布局*/
        flex-direction:column;/*主轴方向垂直方向，从上到下*/
    }
    .loginheader{
        height: 1.2rem;
        margin-top:1.6rem;
    }
    .loginheader h2{
        font-size: 0.52rem;
        color: #fff;
        font-weight: 500;
        color: #BA55D3;
        text-align: center;
    }
    .logincontent{
        margin-top:0.3rem;
        display: flex;
        flex-direction:column;
    }
    .logincontent input{
        width: 75%;
        height: 0.5rem;
        margin: 0.2rem auto;
        background: #fcfcfc;
        border-top: 1px #fcfcfc solid;
        border-left: 1px #fcfcfc solid;
        border-right: 1px #fcfcfc solid;
        border-bottom: 1px #ccc solid;
        outline: none;/*去除输入框点击时的外边框*/
        box-shadow: none;/*去除输入框点击时的外边框*/
        font-size: 0.24rem;
    }
    .logincontent button{
        height: 0.7rem;
        width: 75%;
        margin: 0.3rem auto;
        border: 0;
        background: #BA55D3;
        color: #fff;
        outline: none;
        box-shadow: none;
        font-size: 0.24rem;
        border-radius: 20px;
        text-align: center;
    }
    .registerjump{
        display: flex;
        width: 75%;
        margin: 0 auto;
        justify-content: flex-end;/*水平右对齐*/
    }
    .registerjump a{
        font-size: 0.24rem;
        text-decoration: none;
    }
</style>
<body>
<div class="login">
    <div class="loginheader">
        <h2>H5登录</h2>
    </div>
    <div class="logincontent">
        <input type="text" id="username" name="username" value="" placeholder="用户名">
        <input type="password" id="password" name="password" value="" placeholder="密码">
        <button type="button" onclick="toLogin()">登录</button>
    </div>
    <div class="registerjump" onclick="toRegist()">
        <a href="javascript:;">没有账号，去注册</a>
    </div>
</div>
</body>
</html>
<!--<script type="text/javascript" src="./js/common.js"></script>-->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script>
    function toLogin() {
        var username = $('#username').val();
        var password = $('#password').val();
        if(username.length <= 0) {
            alert("用户名不能为空")
            return;
        }
        if(password.length <= 0) {
            alert("密码不能为空")
            return;
        }

        var url = "http://localhost:8090/SpringMvc/user/login?username=" + username + "&password=" + password;
        $.get(url, function(data) {
            if(data.code == 1) {
                window.location.href = "index.html";
            } else {
                alert(data.msg)
            }
        });
    }
    function toRegist() {
        window.location.href="h5/formtest.html";
    }
    // 手机端的适配代码
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window)
</script>
